<template>
  <div class="login">
    <div class="cont">
      <div>
        <img
          class="logo"
          src="https://ae01.alicdn.com/kf/Uc46e6eb0497a49bb9bc5fe4c6ded0afaE.jpg"
          alt="logo"
        />
      </div>
      <form onsubmit="return false;" @submit="onSubmit">
        <div class="form-type">
          <input
            type="text"
            v-model="username"
            name="user"
            placeholder="用户名"
          />
        </div>
        <div class="form-type">
          <button :disabled="!showLoginBtn">提交</button>
        </div>
      </form>
    </div>
    <Dialog
      v-show="showModal"
      ref="dialog"
      :title="options.title"
      :content="options.content"
      :isCancel="options.isCancel"
      @onCancel="cancelModal"
      @onConfirm="confirmModal"
    />
  </div>
</template>

<script>
import userApi from "../api/user.js";
import Dialog from "../components/Dialog";
export default {
  components: { Dialog },
  data() {
    return {
      username: "",
      showModal: false,
      showLoginBtn: true,
      options: {
        title: "",
        content: "",
        isCancel: true,
      },
    };
  },
  methods: {
    onSubmit() {
      if (this.username == "") {
        this.options = {
          title: "error",
          content: "请输入名字",
          isCancel: false,
        };
        this.showModal = true;
        return false;
      }

      this.showLoginBtn = false;
      userApi.login(this.username).then((res) => {
        this.showLoginBtn = !this.showLoginBtn;
        if (res.code == 200) this.$router.push("/");
        else {
          this.options = {
            title: "error",
            content: "业务未成功",
            isCancel: false,
          };
          this.showModal = true;
        }
      });
    },
    cancelModal() {
      this.showModal = false;
    },
    confirmModal() {
      this.showModal = false;
    },
  },
};
</script>

<style lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  background-color: $main-color;

  .cont {
    height: 100%;
    padding-top: 120px;
    text-align: center;

    img.logo {
      width: 80px;
      height: 80px;
      border-radius: 50rem;
      border: 2px solid white;
      margin-bottom: 32px;
    }

    .form-type + .form-type {
      margin-top: 25px;
    }

    .form-type {
      width: 204px;
      height: 40px;
      margin: 0 auto;
      border-radius: 10px;
      overflow: hidden;

      > *:active {
        box-shadow: 0 0 1 #f2f2f2;
      }

      > * {
        width: 100%;
        height: 100%;
        border: none;
        font-size: 16px;
        border-radius: 10px;
      }

      input {
        background-color: white;
        padding: 5px;
      }

      button {
        background-color: $sec-color;
        color: white;
        transition: all 0.3s ease;

        &:active {
          opacity: 0.6;
        }
      }
    }
  }
}
</style>